<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">
        添加
      </el-button>
    </div>
    <tree-table
      :data="tableData.data"
      :eval-func="func"
      :eval-args="args"
      v-loading="listLoading"
      :expand-all="expandAll"
      border
    >
      <el-table-column label="系统菜单">
        <template slot-scope="scope">
          <span style="color:sandybrown">{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column label="路由">
        <template slot-scope="scope">
          <span style="color:sandybrown">{{ scope.row.path }}</span>
        </template>
      </el-table-column>
      <el-table-column label="关联组件">
        <template slot-scope="scope">
          <span style="color:sandybrown">{{ scope.row.component }}</span>
        </template>
      </el-table-column>
      <!-- 操作按钮组件 -->
      <action-button
        :handle-update="handleUpdate"
        :handle-delete="handleDelete"
        :loading="deleteLoading"
        update-auth="Menu::update"
        delete-auth="Menu::delete"
      />
    </tree-table>
    <dialog-form
      ref="dataForm"
      :status="dialogStatus"
      :rules="rules"
      :data="dataForm"
      :loading="dialogFormLoading"
      @createData="createData"
      @updateData="updateData"
      width="1000px"
    >
      <template>
        <el-row>
          <el-col :span="12" class="form-col">
            <el-form-item label="菜单栏标题" prop="title">
              <el-input v-model="dataForm.title" />
            </el-form-item>
            <el-form-item label="组件名称" prop="name">
              <el-input v-model="dataForm.name" />
            </el-form-item>
            <el-form-item label="图标" prop="icon">
              <el-input v-model="dataForm.icon" />
            </el-form-item>
            <el-form-item label="关联父菜单" prop="father_id">
              <el-select v-model="dataForm.father_id" placeholder="请选择">
                <el-option
                  v-for="menu in fatherMenus"
                  :key="menu.menu_id"
                  :label="menu.title"
                  :value="menu.menu_id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="form-col">
            <el-form-item label="前端路由" prop="path">
              <el-input v-model="dataForm.path" />
            </el-form-item>
            <el-form-item label="组件地址" prop="component">
              <el-input v-model="dataForm.component" />
            </el-form-item>
            <el-form-item label="排序" prop="sort">
              <el-input v-model="dataForm.sort" />
            </el-form-item>
            <el-form-item label="隐藏菜单" prop="hidden">
              <el-switch
                v-model="dataForm.hidden"
                active-text="隐藏"
                inactive-text="显示"
              ></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <Transfer :apiList="apiList" :menuApi="dataForm.api" @changeApi="changeApi" />
      </template>
    </dialog-form>
  </div>
</template>

<script>
/**
  Auth: Lei.j1ang
  Created: 2018/1/19-14:54
*/
import table from '@/mixins/table'
import treeTable from '@/components/TreeTable'
import Transfer from './components/Transfer'
import treeToArray from './customEval'
import { listMenu, updateMenu, createMenu, deleteMenu } from '@/api/menu'
import { fetchList } from '@/api/api'
import { deepClone } from '@/utils'
export default {
  name: 'Menu',
  mixins: [table],
  components: { treeTable, Transfer },
  data() {
    return {
      pageTitle: '菜单',
      getListApi: listMenu,
      createApi: createMenu,
      updateApi: updateMenu,
      deleteApi: deleteMenu,
      func: treeToArray,
      expandAll: false,
      fatherMenus: [],
      args: [null, null, 'timeLine'],
      apiList: [],
      rules: {
        title: [{ required: true, message: '菜单标题不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '关联组件名称不能为空', trigger: 'blur' }],
        path: [
          {
            required: true,
            message: '关联前端路由地址不能为空',
            trigger: 'blur'
          }
        ],
        component: [{ required: true, message: '前端组件地址不能为空', trigger: 'blur' }]
      }
    }
  },
  async created() {
    let query = {
      type: 'AUTH'
    }
    const { err, res } = await fetchList(query)
    if (err === null) {
      this.apiList = res
    }
  },
  methods: {
    changeApi(arr) {
      this.dataForm.api = arr
    },
    setTableData(data) {
      // TODO abstract table数据初始化，可以被覆盖，但大部分情况你不应该覆盖它
      this.tableData = {
        total: data.length,
        data: data.map((item) => {
          item.deleteVisible = false
          return item
        }),
        finished: true
      }
      this.fatherMenus = deepClone(data)
      this.fatherMenus.unshift({
        menu_id: 0,
        title: '根菜单'
      })
    },
    resetForm() {
      this.dataForm = {
        menu_id: undefined,
        father_id: 0,
        title: undefined,
        name: undefined,
        path: undefined,
        icon: undefined,
        component: undefined,
        hidden: false,
        sort: 255,
        api: []
      }
    },
    setDataForm(data) {
      // TODO abstract 编辑时设置表单内容，需要被重写
      this.dataForm = {
        menu_id: data.menu_id,
        father_id: data.father_id,
        title: data.title,
        name: data.name,
        path: data.path,
        icon: data.icon,
        component: data.component,
        hidden: data.hidden === 1,
        sort: 255
      }
      let api = []
      if (typeof data.api !== 'undefined') {
        for (const v of data.api) {
          api.push(v.api_id)
        }
      }
      this.dataForm.api = api
    },
    getSubmitData() {
      return {
        ...this.dataForm,
        hidden: this.dataForm.hidden ? 1: 0,
      }
    },
    afterCreate() {
      // 创建成功后返回操作，根据自定义覆盖，但大部分时候你不需要覆盖它
      this.getList()
    },
    afterUpdate() {
      // 更新成功操作， 根据自定义覆盖 但大部分情况你不需要覆盖它
      this.getList()
    },
    afterDelete(index) {
      // 删除后处理，大部分时候你不需要覆盖它
      this.getList()
    }
  }
}
</script>

<style lang="scss">
.form-col {
  padding-right: 15px;
}
</style>
